<template>
  <!-- 手机底部菜单（别问我为什么把现成的组件又封了一个自定义组件，问就是为了试试子传父、父传子、子调父、父调子） -->
  <!-- <van-grid clickable :column-num="4">
    <van-grid-item icon="wap-home" text="首页" to="/phone/index" @click="goIndex" :icon-color="homeColor" />
    <van-grid-item icon="font" text="杂谈" to="/phone/gossip"  @click="goOther" :icon-color="otherColor"/>
    <van-grid-item icon="comment" text="归档" to="/phone/index" @click="goPlaceFile" :icon-color="placeFileColor"/>
    <van-grid-item icon="friends" text="我的" to="/phone/index" @click="goPersonal" :icon-color="personalColor" />
  </van-grid> -->
  <van-tabbar
    v-model="active"
    @change="onChange"
    active-color="#24657D"
    inactive-color="#323233"
  >
    <van-tabbar-item icon="wap-home" to="/phone/index">首页</van-tabbar-item>
    <van-tabbar-item icon="font" to="/phone/gossip">杂谈</van-tabbar-item>
    <van-tabbar-item icon="comment" to="/phone/placeFile">归档</van-tabbar-item>
    <van-tabbar-item icon="friends" to="/phone/personal">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from "vue";
// 引入axios钩子
import axios from "/@/request/axios";
// 引入路由
import { useRouter, useRoute } from "vue-router";
// 引入公共js文件
import utils from "/@/assets/js/public/function";
// api 接口文件
import {
  getIndexData,
  getRemarkList,
  getFileList,
  getUserSession,
} from "/@/api/phone/index";
import { common, userinfo } from "/@/hooks/common";
import { Toast } from "vant";

// =============================================================================
// 实例化路由
const router = useRouter();
const route = useRoute();

const data = reactive({
  // tabbar 默认选中索引
  active: 0,
});

/**
 * @name: 将data绑定值dataRef
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-01-10
 */
const { active } = toRefs(data);

//  使用defineEmits创建名称，接受一个数组
const $myemit = defineEmits([
  "getIndexDataList",
  "getOtherData",
  "getPlaceFileData",
  "getPersonalData",
]);

/**
 * @name: tabbar 发生改变时
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 * @param:	index	number	索引
 */
const onChange = (index: any): void => {};

/**
 * @name: 获取首页数据公共方法
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 * @param:	page	number	页码
 * @param:	search	string	搜索值
 * @param:	category_id	number	分类
 */
const getIndexDataList = (
  page: number = 1,
  search: string = "",
  category_id: number = 0,
  sign: boolean = true
): void => {
  // 判断是否为数字
  if (parseFloat(page).toString() == "NaN") {
    page = 1;
  }
  // 请求数据
  // getUserSessionData();
  try {
    data.active = 0;
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
    // utils.alertLoadExec(true);
    let param = {
      page: page,
      search: search,
      category_id: utils.encryptCode({ category_id: category_id }),
    };
    getIndexData(param).then(function (response: any) {
      response.page = page;
      response.category_id = category_id;
      // console.log(response);
      // 传递数据给父组件
      $myemit("getIndexDataList", response);
      // 自定义loading消失
      // utils.alertLoadExec(false);
      utils.sleep(1000).then(() => {
        // 这里写sleep之后需要去做的事情
        Toast.clear();
      });
    });
  } catch (error) {
    console.log("chucuole");
    // 自定义loading消失
    // utils.alertLoadExec(false);
    Toast.clear();
  }
};

/**
 * @name: 获取杂谈页数据
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 * @param:	page	number	页码
 */
const getOtherData = (sign: Boolean = true): void => {
  Toast.loading({
    message: "加载中...",
    forbidClick: true,
  });
  // utils.alertLoadExec(true);
  // 请求数据
  // getUserSessionData();
  try {
    data.active = 1;
    let param = {};
    getRemarkList(param).then(function (response: any) {
      // console.log(response);
      // 传递数据给父组件
      $myemit("getOtherData", response);
      // 自定义loading消失
      // utils.alertLoadExec(false);
      utils.sleep(1000).then(() => {
        // 这里写sleep之后需要去做的事情
        Toast.clear();
      });
    });
  } catch (error) {
    console.log("chucuole");
    // 自定义loading消失
    // utils.alertLoadExec(false);
    Toast.clear();
  }
};

/**
 * @name: 去归档页
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 */
const getPlaceFileData = (sign: Boolean = true): void => {
  // utils.alertLoadExec(true);
  Toast.loading({
    message: "加载中...",
    forbidClick: true,
  });
  // getUserSessionData();
  // 请求数据
  try {
    data.active = 2;
    let param = {};
    getFileList(param).then(function (response: any) {
      // console.log(response);
      // 传递数据给父组件
      $myemit("getPlaceFileData", response);
      // 自定义loading消失
      // utils.alertLoadExec(false);
      utils.sleep(5000).then(() => {
        // 这里写sleep之后需要去做的事情
        Toast.clear();
      });
    });
  } catch (error) {
    console.log("chucuole");
    // 自定义loading消失
    // utils.alertLoadExec(false);
    Toast.clear();
  }
};

/**
 * @name: 去个人中心页
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 */
const getPersonalData = (): void => {
  data.active = 3;
};

/**
 * @name: 获取用户登录信息
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
const getUserSessionData = (): void => {
  try {
    let param = {};
    getUserSession(param).then(function (response: any) {
      userinfo.email = response.email;
      userinfo.figureurl = response.figureurl;
      userinfo.nickname = response.nickname;
      userinfo.userid = response.userid;
    });
  } catch (error) {
    console.log("登录信息出错！");
  }
};

getUserSessionData();

// 将组件中的属性暴露出去，这样父组件可以获取
defineExpose({
  ...toRefs(data),
  getIndexDataList,
  getOtherData,
  getPlaceFileData,
  getPersonalData,
});
</script>
<style lang="scss">
// @import "../../assets/css/components/pc/Footer.scss";
</style>
